<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Basic Development Framework</title>
<script type="text/javascript" src="../../static/jquery.js"></script>
<script type="text/javascript"
	src="../../static/jquery-plugin/jquery.cookie.js"></script>
<script type="text/javascript" src="../../static/om-ui/operamasks-ui.js"></script>
<script type="text/javascript">
	var omui_path_theme = "../../static/om-ui/theme";

	var theme = $.cookie("theme") || "default";

	var theme_path = omui_path_theme + "/" + theme + "/om-" + theme + ".css";

	document
			.writeln("<link rel='stylesheet' type='text/css' href='"+theme_path+"'/>");
</script>

<script type="text/javascript">
	$(document).ready(function() {
		 var layout=$("body").omBorderLayout({
         	   panels:[{
          	        id:"center-panel",
          	     	header:false,
          	        region:"center"
          	    },{
          	        id:"west-panel",
          	        resizable:false,
          	        collapsible:false,
          	        header:false,
          	        region:"west",
          	        width:180
          	    }]
           });
		 var currentData;
		var menuData=[{id:"system",text:"系统管理",expanded:true,data:{name:"系统管理",desc:"系统管理",url:""}},
		              {id:"system-user",text:"用户管理",pid:"system",data:{name:"用户管理",desc:"用户管理112",url:"sysController?user"}},
		              {id:"system-role",text:"角色管理",pid:"system",data:{name:"角色管理",desc:"角色管理222",url:"sysController?role"}},
		              {id:"system-menu",text:"菜单管理",pid:"system",data:{name:"菜单管理",desc:"菜单管理333",url:"sysController?menu"}},
		              {id:"other",text:"演示菜单",expanded:true,data:{name:"演示菜单",desc:"演示菜单222",url:""}},
		              {id:"other-baidu",text:"百度",pid:"other",data:{name:"百度",desc:"百度",url:"www.baidu.com"}},
		              {id:"other-fileupload",text:"文件上传",pid:"other",data:{name:"文件上传",desc:"文件上传",url:"demoController?fileupload"}}];
		var treeMenu = $("#treeMenu").omTree({
            dataSource : menuData,
            simpleDataModel: true,
            onSelect: function(nodedata){
            	var currentData = nodedata.data;
            	$("#label_name").text(currentData.name);
            	$("#label_desc").text(currentData.desc);
            	$("#label_url").text(currentData.url);
            	
            	$("#buttonAddSubMenu").omButton("enable");
            	$("#buttonUpdate").omButton("enable");
            }
        });

		var buttonBar = $("#buttonBar").omButtonbar({
			btns : [{label:"添加顶级菜单",id:"buttonAdd" ,icons:{left:'../icons/down.png'},
		     onClick:function(){
		    	 openDialog("添加顶级菜单","addNew");
		     }
			},{label:"添加子菜单",id:"buttonAddSubMenu" ,icons:{left:'../icons/down.png'},disabled : true,
			     onClick:function(){
					 var currentNode = treeMenu.omTree("getSelected");
					 var data={parent:currentNode.text};
			    	 openDialog("添加子菜单["+data.parent+"]","addSubMenu",data);
			     }
				},
	        {label:"编辑菜单",id:"buttonUpdate",disabled : true,
				onClick:function(){
					 var currentNode = treeMenu.omTree("getSelected");
					 var parentNode = treeMenu.omTree("getParent",currentNode);
					 var data = currentNode.data;
					 data.parent=parentNode?"":parentNode.text;
			    	 openDialog("编辑菜单["+currentNode.text+"]","updateMenu",data);
				}
	        }
	        ]
          });
		
		var dialog = $("#dialog-menu").omDialog({
			width: 480,
            autoOpen : false,
            modal : true,
            resizable : false,
            buttons : {
                "提交" : function(){
		                submitDialog();
		                return false; //阻止form的默认提交动作
		            },
                "取消" : function() {
                    $("#dialog-menu").omDialog("close");//关闭dialog
                }
            }
		});
		// 对表单进行校验
        var validator = $('#form-menu').validate({
            rules : {
                name : {required: true}, 
            }, 
            messages : {
           	 name : {required : "菜单名称不能为空"},
            }
        });

		var openDialog=function(title,flag,rowData){
			 validator.resetForm();
            rowData = rowData || {};
            $("input[name='name']",dialog).val(rowData.name);
            $("input[name='parent']",dialog).val(rowData.parent);
            $("input[name='url']",dialog).val(rowData.url);
            $("textarea[name='desc']",dialog).val(rowData.desc);
            dialog.omDialog("option", "title", title);
            dialog.omDialog("open");//显示dialog
            dialog.operFlag=flag;
		}
		 //dialog中点提交按钮时将数据提交到后台并执行相应的add或modify操作
       var submitDialog = function(){
           if (validator.form()) {
               alert("提交数据.data:\n"+strData);
               /*$.post('../../../gridcrud.do',submitData,function(){
                   if(isAdd){
                       $('#grid').omGrid('reload',1);//如果是添加则滚动到第一页并刷新
                       $.omMessageTip.show({title: "操作成功", content: "添加数据成功", timeout: 1500});
                   }else{
                       $('#grid').omGrid('reload');//如果是修改则刷新当前页
                       $.omMessageTip.show({title: "操作成功", content: "修改数据成功", timeout: 1500});
                   }
                   $("#dialog-form").omDialog("close"); //关闭dialog
               });*/
               dialog.omDialog("close");
           }
       };
	});
</script>
<style type="text/css">
html,body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.td_header{
font-weight: bold;
font-size: 14px;
width:160px;
}
#tableMenuInfo{
color:#658fd4;
border-bottom:#aedef2 thin solid;
border-left:#aedef2 thin solid;
border-right:#aedef2 thin solid;
border-top:#aedef2 thin solid;
font-size:12px;
font-family:"新宋体";
overflow:auto;
}
</style>
</head>
<body>
<div id="west-panel">
	<table id="treeMenu"></table>
</div>
<div id="center-panel">
	<div id="buttonBar"></div>
	<table id="tableMenuInfo" border="1" style="width:100%;"cellspacing="0" cellpadding="0">
		<tr>
			<td class="td_header">菜单名称</td>
			<td><label id="label_name"></label></td>
		</tr>
		<tr>
			<td class="td_header">菜单URL</td>
			<td><label id="label_url"></label></td>
		</tr>
		<tr>
			<td class="td_header">菜单描述</td>
			<td><label id="label_desc"></label></td>
		</tr>
	</table>
</div>
<div id="dialog-menu">
	<form id="form-menu">
	        <input name="id" style="display: none"/>
	        <table>
	            <tr>
	                <td>菜单名称：</td>
	                <td><input name="name" /></td>
	            </tr>
	            <tr id="tr_">
	                <td>菜单URL：</td>
	                <td><input name="url" /></td>
	            </tr>
	            <tr id="tr_">
	                <td>上级菜单：</td>
	                <td><input name="parent" disabled="disabled"/></td>
	            </tr>
	            <tr>
	                <td>菜单描述：</td>
	                <td><textarea name="desc" style="width:200px;height:60px;"></textarea></td>
	            </tr>
	        </table>
        </form>
	
</div>
</body>
</html>